<template>
	<div class="vuestic-switch">
		<div class="vuestic-switch-option true-option" :class="{'active': value}" @click.prevent="setValue(true)">
			<slot name="trueTitle">TRUE</slot>
		</div>
		<div class="vuestic-switch-option false-option" :class="{'active': !value}" @click.prevent="setValue(false)">
			<slot name="falseTitle">FALSE</slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'md-switch',
		props: {
			value: Boolean
		},
		mounted() {
			this.$emit('input', this.value)
		},
		methods: {
			setValue(newVal) {
				this.$emit('input', newVal)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./md";
</style>
